/**
 * @author Nicolas CARPi <nico-git@deltablot.email>
 * @author Marcel Bolten <github@marcelbolten.de>
 * @copyright 2024 Nicolas CARPi
 * @see https://www.elabftw.net Official website
 * @license AGPL-3.0
 * @package elabftw
 */

@use './variables';
@import 'tom-select/dist/scss/tom-select.bootstrap4';

.focus .ts-control,
.plugin-dropdown_input.focus .ts-dropdown .dropdown-input { /* stylelint-disable-line selector-class-pattern -- next-line does not work here */
  border-color: variables.$elabblue;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(41, 174, 185, 0.6);
  outline: 0;
}

.ts-dropdown {
  min-width: 200px;

  .dropdown-input-wrap .dropdown-input {
    border-radius: 0.25rem 0.25rem 0 0;
    border-width: 1px;
  }
}

.ts-wrapper {
  max-width: clamp(var(--breakpoint-sm), 50vw, 90vw);

  .ts-control .item {
    background: variables.$superlight;
    border: 0 solid variables.$firstlevel;
    border-radius: calc(0.25rem - 1px);
    color: variables.$mediumstrong;
    cursor: pointer;
    padding: 1px 5px;
    white-space: nowrap;
  }

  // don't block down button
  .ts-control:not(.rtl) {
    padding-right: 2rem !important;
  }

  &.multi {
    position: relative;

    .ts-control {
      flex-wrap: nowrap;
      gap: 4px;
      max-width: 400px;
      min-height: 38px;
      overflow-x: auto;
      padding: 4px 8px;
      scrollbar-width: thin;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: variables.$firstlevel;
        border-radius: 2px;
      }

      .clear-button {
        background: variables.$white !important;
        position: sticky;
        right: -2rem;
        // top attribute not applying
        transform: translateY(0);
      }
    }
  }

  // keep size of select for tag filter
  // prevent tags select from collapsing
  /* stylelint-disable-next-line selector-class-pattern */
  &.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
    display: inline-block !important;
  }

  // need some extra space for x so it does not overlay selected options
  /* stylelint-disable-next-line selector-class-pattern */
  &.plugin-clear_button .ts-control {
    padding-right: 30px !important;
  }

  // don't add padding if not multi
  &:not(.multi) .ts-control .item {
    padding: 0 5px;
  }

  // avoid inheritance form .text-center for team selection on register page
  #team-ts-dropdown {
    text-align: left;
  }
}

// let the metavalue inuput stretch to same height as metakey select
#metavalue {
  height: auto;
}

// the input is a two-lined tomSelect, allowing it to behave same as tags input. But we have a Select so this is needed.
// behavior inspired from https://tom-select.js.org/plugins/no-backspace-delete/
#itemSelectWrapper,
#itemSelectWrapperModal {
  .ts-control,
  .ts-wrapper {
    display: none;
  }
}

.selected-item-badge {
  background-color: var(--badge-color, #000);
  border-radius: 999px;
  color: variables.$mainbackground;
  font-size: 1.2rem;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
}
